<script setup lang="ts">
import type { BackgroundProps } from '@/types';

import {
  type ComponentInternalInstance,
  computed,
  getCurrentInstance,
  ref,
  watch,
} from 'vue';

import { ElImage } from 'element-plus';

import { useAppStore } from '@/store';

defineOptions({
  name: 'Background',
});

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const appStore = useAppStore();
const defaultBg = computed(() => appStore.setting.background);

const BG_PRESET: Array<BackgroundProps> = proxy?.$config.setting
  .background as Array<BackgroundProps>;

const modelValue = ref(defaultBg.value);
function activeClass(bg: string): string[] {
  return bg === modelValue.value ? ['outline-box-active'] : [];
}
watch(
  () => modelValue.value,
  (val) => {
    appStore.updateSetting({ background: val });
  },
);
</script>
<template>
  <div class="content">
    <template v-for="bg in BG_PRESET" :key="bg.name">
      <div class="flex cursor-pointer flex-col" @click="modelValue = bg.name">
        <div :class="activeClass(bg.name)" class="outline-box flex-center p-2">
          <ElImage :src="bg.src" />
        </div>
        <div class="text-muted-foreground mt-2 text-center text-xs">
          {{ bg.label }}
        </div>
      </div>
    </template>
  </div>
</template>
